/*
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-03 20:22:47
 * @Description  : 监听页面的resize事件，判断页面处于大屏还是小屏，控制侧边栏是否显示
 */

import { debounce } from '@/utils'

export const userMenuShow = () => {
  const menuShow = ref(true)
  const isSmall = ref(false)

  const showMask = computed(() => {
    return menuShow.value && isSmall.value
  })

  const setMenuShow = debounce(function () {
    menuShow.value = window.innerWidth < 768 ? false : true
    isSmall.value = window.innerWidth < 768 ? true : false
  }, 50)

  onMounted(() => {
    setMenuShow()
    window.addEventListener('resize', setMenuShow)
  })

  onUnmounted(() => {
    window.removeEventListener('resize', setMenuShow)
  })

  const changeMenuShow = (value: boolean) => {
    menuShow.value = value
  }

  return {
    menuShow,
    isSmall,
    showMask,
    changeMenuShow
  }
}
